<template>
<div @mouseleave="mousemoves">
  <!--导航 -->
  <div style="1220px" >
    <el-row :gutter="10" >
      <!--loge -->
      <el-col :xs="4" :sm="4" :md="4" :lg="4">
        <img src="@/assets/loge.png" />
      </el-col>
      <!--搜索内容 -->
      <el-col :xs="15" :sm="15" :md="15" :lg="15">
        <ul>
          <li class="navli" :key="item.id" v-for="item in nav_data">
            <a @mouseenter="onmouseenter"  >{{item.name}}</a>
          </li>
        </ul>
      </el-col>
      <!--搜索 -->
      <el-col :xs="4" :sm="4" :md="4" :lg="4">
        <el-input placeholder="请输入内容" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <div class="gradient-wrapper">
    </div>
  </div>

       <!--鼠标悬浮内容 -->
    <el-row @mouseenter="onmouseenter" class="item-el-row" :style="{white: scrollerHeight}">
      <ul >
        <li class="item-data"  v-bind:class="{'hideitemdata': hidefalge}" :key="item.id" v-for="(item, index) in item_data">
          <a href>
            <!--获取到当前最后一个下表 -->
            <div :class="[index==item_data.length-1?hiderightborder:borderright]">
              <img :src="item.path" />
            </div>
            <div>{{item.name}}</div>
            <p>{{item.price}}</p>
          </a>
        </li> 
      </ul>
    </el-row>
  </div>
</template>
<script>
export default {
  computed: {
    // 滚动区高度
    // (业务需求：手机屏幕高度减去头部标题和底部tabbar的高度，当然这2个高度也是可以动态获取的)
    scrollerHeight: function() {
      return 1226+ 'px';
    }
  },
  data() {
    return {
      isheith:100,
      hidefalge: false,//隐藏标签
      //动态设置样式
      hiderightborder: "hiderightborder",
      borderright: "borderright",
      nav_data: [
        { id: 1, name: "小米手机" },
        { id: 2, name: "Redmi红米" },
        { id: 3, name: "电视" },
        { id: 4, name: "笔记本" },
        { id: 5, name: "家电" }
      ],
      item_data: [
        {
          id: 1,
          name: "小米10 Pro",
          price: 65.5,
          path: require("@/assets/img/a4a76ee684e51f0ee531ef3dc7f0aeaf.webp")
        },
        {
          id: 2,
          name: "小米10 Pro",
          price: 65.5,
          path: require("@/assets/img/a4a76ee684e51f0ee531ef3dc7f0aeaf.webp")
        },
        {
          id: 3,
          name: "小米10 Pro",
          price: 65.5,
          path: require("@/assets/img/a4a76ee684e51f0ee531ef3dc7f0aeaf.webp")
        },
        {
          id: 4,
          name: "小米10 Pro",
          price: 65.5,
          path: require("@/assets/img/a4a76ee684e51f0ee531ef3dc7f0aeaf.webp")
        },
        {
          id: 5,
          name: "小米10 Pro",
          price: 65.5,
          path: require("@/assets/img/a4a76ee684e51f0ee531ef3dc7f0aeaf.webp")
        },
        {
          id: 6,
          name: "小米10 Pro",
          price: 65.5,
          path: require("@/assets/img/a4a76ee684e51f0ee531ef3dc7f0aeaf.webp")
        }
      ]
    };
  },
  methods: {
    search() {
      alert("点击了搜索");
    },
    onmouseenter(){
      //鼠标移入事件
      this.hidefalge=true;
    },
    mousemoves(){
      //鼠标移走
      this.hidefalge=false;
    }
  },created:function(){

   this.$API.Post('request/productNav/selectProductNav',"111").then(function(respon){
      console.log(1);
      console.log(respon);
    })
    this.$axios.get('request/productNav/selectProductNav').then(function(respon){
      console.log(respon);

    }).catch(function(error){
      console.log(error);
    })
  }
};
</script>

<style>
li {
  list-style-type: none;
  display: inline-block;
}
a {
  padding: 26px 10px 38px;
}
.navli a:hover {
  cursor: pointer;
  color: red;
}
.item-data {
  width: 15%;
  text-align: center;
  display: none;
}
.borderright {
  border-right: 0.6px solid grey;
}
.hiderightborder {
  border: 0px;
}
a {
  text-decoration: none;
}
.hideitemdata{
   display: inline-block;
  overflow: hidden;
  animation: wrapper-gradient 0.5s linear;
  display: inline-block;
}



/**定义从上往下的动画 */
@keyframes wrapper-gradient {
  0% {
    height: 0px;
  }
  100% {
    height: 100px;
  }
}
@media screen and (max-width: 900px) {
.item-el-row{
  text-align: center;
  background-color: white;
  position: absolute;
  left: 0px;
  width: 1226px;
  border-bottom: 0.5px solid gray;
  z-index: 99;
}
}
@media screen and (min-width: 900px) {
.item-el-row{
    text-align: center;
  background-color: white;
  position: absolute;
  left: 0px;
  width: 100%;
  border-bottom: 0.5px solid gray;
  z-index: 99;
}
}
</style>